<template>
  <div class="password-change-container">
    <h1>修改密码</h1>
    <form @submit.prevent="handleSubmit">
      <div class="input-group">
        <label for="oldPassword">请输入原密码：</label>
        <input type="password" id="oldPassword" v-model="formData.oldPassword" required />
      </div>
      <div class="input-group">
        <label for="newPassword">请输入新密码：</label>
        <input type="password" id="newPassword" v-model="formData.newPassword" required />
      </div>
      <div class="input-group">
        <label for="confirmNewPassword">请再次输入新密码：</label>
        <input type="password" id="confirmNewPassword" v-model="formData.confirmNewPassword" required />
      </div>
      <button type="submit">确认修改</button>
    </form>
  </div>
</template>

<script>export default {
    data() {
      return {
        formData: {
          oldPassword: '',
          newPassword: '',
          confirmNewPassword: ''
        }
      };
    },
    methods: {
      handleSubmit() {
        // 这里可以添加提交表单的逻辑，例如验证两次新密码是否一致等
        if (this.formData.newPassword !== this.formData.confirmNewPassword) {
          alert('两次输入的新密码不一致！');
          return;
        }

        // 如果所有验证都通过，则可以进行下一步操作，比如发送数据到服务器
        console.log('Form submitted:', this.formData);
      }
    }
  };</script>

<style scoped>
  .password-change-container {
    max-width: 400px;
    margin: auto;
    padding: 20px;
  }

  .input-group {
    margin-bottom: 15px;
  }

    .input-group label {
      display: block;
      margin-bottom: 5px;
    }

    .input-group input {
      width: 100%;
      padding: 10px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }

  button {
    background-color: #4CAF50; /* 绿色 */
    color: white;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    transition-duration: 0.4s;
  }

    button:hover {
      background-color: #45a049; /* 鼠标悬停时颜色加深 */
    }
</style>
